// 登录页面组件
// src/pages/login/index.tsx
import styles from "@styles/login.module.scss";
import Header from "@shared/header";
import { RightOutline } from "antd-mobile-icons";
import Password from "@pages/login/widgets/password";
import Message from "@pages/login/widgets/message";
import useToggle from "@hooks/useToggle";

export default function Login() {
  // 用于控制短信登录组件和密码登录组件的切换
  const [mobileLogin, setMobileLogin] = useToggle(false);
  // 渲染视图
  return (
    <>
      <Header link={"注册"} />
      <div className={styles.page}>
        <div className={styles.title}>
          <h3>{mobileLogin ? "短信登录" : "密码登录"}</h3>
          <span onClick={setMobileLogin}>
            {mobileLogin ? "密码登录" : "短信登录"} <RightOutline />
          </span>
        </div>
        {mobileLogin ? <Message /> : <Password />}
        <div className={styles.forget}>
          <a href="#">忘记密码?</a>
        </div>
        <div className={styles.third}>
          <div className={styles.headline}>
            <span>第三方登录</span>
          </div>
          <div className={styles.methods}>
            <img src={require("@icons/login/qq.svg").default} alt="QQ登录" />
          </div>
        </div>
      </div>
    </>
  );
}
